<template>
	<!--页中的外层的容器(包裹器)可以使用id选择器,但是组件中的包裹器不要使用id选择器-->
	<view class="categoryContainer">
		<!--头部-->
		<view class="categoryHeader"><view class="search">搜索商品</view></view>
		<!--内容区域-->
		<view class="contentContainer">
			<view class="leftContainer">
				<scroll-view scroll-y="true" class="leftScroll">
					<view class="scrollItem" :class="{ active: navId === cate.id }" v-for="(cate, index) in categorys" :key="cate.id" @click="navId = cate.id">{{ cate.name }}</view>
				</scroll-view>
			</view>
			<view class="rightContainer">
				<scroll-view scroll-y="true" class="rightScroll">
					<view class="contentList">
						<image class="contentImg" :src="categoryItem.imgUrl"></image>
						<view class="contentItem" v-for="(item, index) in categoryItem.subCateList" :key="item.id">
							<image :src="item.wapBannerUrl"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js'; // 引入request

export default {
	name: 'categorys',
	data() {
		return {
			categorys: [], // 分类信息列表的数据
			navId: '' // 分类界面切换的标识
		};
	},
	methods: {
		// 获取分类界面初始化数据
		async getCategorys() {
			const result = await request('/getCategoryDatas');
			if (result.code === 200) {
				this.categorys = result.data;
				this.navId = result.data[0].id;
			}
		}
	},
	computed: {
		// 计算分类标题所对应的数据
		categoryItem() {
			return this.categorys.find(item => item.id === this.navId);
		}
	},
	// 页面加载后的生命周期回调
	mounted() {
		this.getCategorys(); // 获取分类页面初始化数据
	}
};
</script>

<style lang="stylus">
.categoryContainer
	.categoryHeader
		padding 10upx 0
		.search
			width 90%
			height 60upx
			line-height 60upx
			text-align center
			margin 0 auto
			border 1upx solid #ededed
			border-radius 10upx
			background-color #eee
			font-size 26upx
	.contentContainer
		display flex
		border-top 1upx solid #eee
		box-sizing border-box
		.leftContainer
			width 20%
			border-right 1upx solid #eee
			box-sizing border-box
			.leftScroll
				height calc(100vh - 80upx)
				.scrollItem
					font-size 28upx
					height 80upx
					line-height 80upx
					text-align center
					position relative
					&.active:after
						position absolute
						content ''
						height 60upx
						width 2upx
						background-color red
						top 10upx
						left 5upx
		.rightContainer
			width 80%
			.rightScroll
				height calc(100vh - 80upx)
				.contentList
					display flex
					flex-wrap wrap
					.contentImg
						width 520upx
						height 190upx
						margin 20upx auto
					.contentItem
						width 33.33%
						display flex
						flex-direction column
						align-items center
						image
							width 90%
							height 144upx
						text
							font-size 26upx
</style>
